<template>
  <div class="health-box" style="padding-right: 12px">
    <div class="title-box">
      <div class="title-item-left">
        <span class="text-icon" />
        就诊记录
      </div>
    </div>
    <div>
      <a-table
        size="small"
        :columns="state.column"
        :dataSource="state.table"
        :loading="state.tableLoading"
        :pagination="false"
        :scroll="{ y: 'calc(100vh - 215px)' }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex == 'examRecordList'">
            <a-button
              @click="examRecordBtn(record.examRecordList, record.testRecordList)"
              type="link"
              v-if="record.examRecordList.length || record.testRecordList.length"
              >查看详情</a-button
            >
            <span v-else>无</span>
          </template>
          <template v-if="column.dataIndex == 'orderList'">
            <a-button
              @click="orderListBtn(record.orderList)"
              type="link"
              v-if="record.orderList.length"
              >查看详情</a-button
            >
            <span v-else>无</span>
          </template>
          <template v-if="column.dataIndex == 'surgeryRecordList'">
            <a-button
              @click="surgeryRecordBtn(record.surgeryRecordList)"
              type="link"
              v-if="record.surgeryRecordList.length"
              >查看详情</a-button
            >
            <span v-else>无</span>
          </template>
        </template>
      </a-table>
    </div>
  </div>
  <ExamTestRecord ref="examTestRecordRef" />
  <OrderList ref="orderListRef" />
  <SurgeryRecord ref="surgeryRecordRef" />
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { getPatientVisit } from '@/api/patientMana/index.ts'
import ExamTestRecord from './exam-test-record.vue'
import OrderList from './order-list.vue'
import SurgeryRecord from './surgery-record.vue'
const state = reactive({
  column: [
    {
      title: '就诊时间',
      key: 'visitTime',
      align: 'left',
      dataIndex: 'visitTime'
    },
    {
      title: '就诊类型',
      key: 'visitTypeName',
      align: 'left',
      dataIndex: 'visitTypeName'
    },
    {
      title: '主诊断',
      key: 'diagName',
      align: 'left',
      dataIndex: 'diagName'
    },
    {
      title: '就诊科室',
      key: 'deptName',
      align: 'left',
      dataIndex: 'deptName'
    },
    {
      title: '检验检查记录',
      key: 'examRecordList',
      align: 'left',
      dataIndex: 'examRecordList'
    },
    {
      title: '用药记录',
      key: 'orderList',
      align: 'left',
      dataIndex: 'orderList'
    },
    {
      title: '手术记录',
      key: 'surgeryRecordList',
      align: 'left',
      dataIndex: 'surgeryRecordList'
    }
  ],
  table: [],
  tableLoading: false
})
const patId = ref()

const init = (id) => {
  state.tableLoading = true
  getDataLIst(id)
}

const getDataLIst = (id) => {
  getPatientVisit({ empi: id })
    .then((res) => {
      state.tableLoading = false
      state.table = res.data
    })
    .catch(() => {
      state.tableLoading = false
    })
}

const examTestRecordRef = ref()
const examRecordBtn = (examList, testList) => {
  examTestRecordRef.value.init(examList, testList)
}

const orderListRef = ref()
const orderListBtn = (data) => {
  orderListRef.value.init(data)
}

const surgeryRecordRef = ref()
const surgeryRecordBtn = (data) => {
  surgeryRecordRef.value.init(data)
}

defineExpose({
  init
})
</script>

<style lang="less" scoped>
.title-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 32px;
  margin: 0 0 10px;
  font-weight: 600;
  line-height: 32px;
  color: #1d2129;

  .title-item-left {
    font-size: 18px;
    font-weight: 600;
  }

  .text-icon {
    display: inline-block;
    width: 3px;
    height: 16px;
    margin-right: 8px;
    line-height: 32px;
    background: #165dff;
  }
}
</style>
